// 我的优惠券
<template>
  <div class="mycoupon">
    <ul class="title">
      <li v-for="(item,key) in title" :key="key" class="active" @click="changesjump($event,key)">
        {{item.name}}
        <i v-show="item.num">({{item.num}})</i>
      </li>
    </ul>

    <div>
      <no-data :msg="msg"/>
      <!-- <h1>暂未开放</h1> -->
    </div>
  </div>
</template>
<script>
export default {
  name: "MyCoupon",

  data() {
    return {
      msg: '暂未开放...',
      title: [
        {
          name: "优惠券",
          id: 0
        }
      ],
    }
  }
}
</script>
<style lang="scss" scoped>
.mycoupon {
  width: 970px;
  background: #fff;
  padding: 15px;
  box-sizing: border-box;
  div {
    h1 {
      line-height: 500px;
      text-align: center;
      font-size: 100px;
      letter-spacing: 10px;
      color: antiquewhite;
    }
  }
  .title {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    li {
      line-height: 56px;
      font-size: 16px;
      text-align: center;
      padding: 5px 10px;
      letter-spacing: 1.5px;
      margin: 0 15px;
      cursor: pointer;
      i {
        color: #ff9000;
      }
    }
    .active {
      color: #ff9000;
      line-height: 56px;
      font-weight: bold;
      border-bottom: #ff9000 solid 2px;
    }
  }
}
</style>




